<template>
  <div class="noticeContent">
    <div class="title">
      <div class="line"></div>
      <div class="name" style="margin-right: 10px" @click="handleUser">用户管理</div>
      <div class="name" @click="handleRole" v-if="show">角色管理</div>
      <div class="btns">
        <div class="btn add" @click="handleAdd">新增</div>
        <!-- <div class="btn" @click="handleExport">导出</div> -->
      </div>
    </div>
    <div class="search">
      <div class="inputItem">
        <span>用户名称</span>
        <CommonInput v-model="name" placeholder="请输入用户名称" />
      </div>
      <div class="inputItem">
        <!-- <span>通知时间</span> -->
        <!-- <CommonDateSelect v-model="noticeForm.date" /> -->
      </div>
      <div class="btns">
        <div class="btn searchBtn" @click="handleSearch">查询</div>
        <div class="btn reset" @click="handleReset">重置</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage :columns="userColumns" :tableData="tableData" :pagination="pageInfo">
        <template #avatar="{ row }">
          <!-- <img :src="row.profilePictureBase64Data" alt=""> -->
          <el-avatar :size="'small'" :src="row.profilePictureBase64Data"></el-avatar>
        </template>
        <template #role="{ row }">
          <span>{{ roleList[row.role] }}</span>
        </template>
        <template #edit="{ row }">
          <span @click="handleEdit(row)" class="edit">编辑</span>
        </template>
      </CommonTablePage>
    </div>
    <changeDialog v-if="changeDialog" :changeDialog.sync="changeDialog" :curRow="curRow" @changeUser="changeUser" />
  </div>
</template>
<script>
import { userColumns } from "./columns";
import changeDialog from "@/views/permissionManage/components/changeDialog";
import { addUser, getTablePage } from "@/api/permissionManage"
import { viewMinix } from "@/minix/viewMinix.js";

export default {
  components: {
    changeDialog,
  },
  mixins: [viewMinix],

  data() {
    return {
      roleList: ["球员", "教练", "管理员"],
      curRow: {},
      userColumns,
      tableData: [
        {
          name: "张三",
          account: "103278",
          password: "123456",
          role: "0",
          id: "98",
        },
        {},
      ],
      name: "",
      changeDialog: false,
      show: false
    };
  },
  created() {
    this.getTableData();
    const menu = localStorage.getItem("menu")
    console.log(menu, 'me');
    if (menu.includes('roleManage')) {
      this.show = true
    }
  },
  methods: {
    handleEdit(row) {
      this.curRow = row;
      this.changeDialog = true;
    },
    handleAdd() {
      this.changeDialog = true;
      this.curRow = {};
    },
    handleRole() {
      this.$router.push("/roleManage")
    },
    handleUser() { },
    async changeUser(val) {
      console.log(val, 'valre');
      const res = await addUser(val)
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: `${val.id ? '编辑' : '新增'}成功`
        })
        this.changeDialog = false;
        this.getTableData()
      }
    },
    async getTableData() {
      const data = {
        page: {
          ...this.pageInfo
        },
        param: {
          name: this.name
        }
      }
      const res = await getTablePage(data)
      if (res.code == 200) {
        this.tableData = res.data.records
        this.pageInfo.total = res.data.total * 1
      }
    },
    handleSearch() {
      this.getTableData()
    },
    handleReset() {
      this.name = ''
      this.getTableData()

    }

  },
};
</script>

<style lang="less" scoped>
.noticeContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;

    .name {
      cursor: pointer;
    }

    .btns {
      display: flex;
      margin-left: auto;

      .add {
        margin-right: 8px;
      }
    }

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      margin-left: auto;
      width: 68px;
      height: 32px;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc6c09;
      cursor: pointer;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      align-items: center;
      margin-right: 20px;

      span {
        margin-right: 8px;
      }
    }

    .btns {
      margin-left: auto;
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        font-size: 16px;
        font-weight: normal;
        color: #fff;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fc6c09;
        cursor: pointer;
      }

      .reset {
        background-color: #fff;
        color: #fc6c09;
        border: 1px solid #fc6c09;
        margin-left: 8px;
      }
    }
  }

  .content {
    margin-top: 15px;
    padding: 15px 10px 10px 30px;
    flex: 1;
    display: flex;
    background-color: #fff;

    .edit {
      color: #fc6c09;
      cursor: pointer;
    }
  }
}
</style>
